<script setup lang="ts">
import F_list, {type filterGroupType} from "@/components/admin/f_list.vue";
import {userListApi, type userListType} from "@/api/user_api";
import type {columnType} from "@/components/admin/f_list.vue";
import type {formListType} from "@/types";
import {roleOptions} from "@/options";
import {userAdminUpdateInfoApi, type userAdminUpdateInfoRequest} from "@/api/user_api";
import {Message} from "@arco-design/web-vue";
import F_avatar from "@/components/common/f_avatar.vue";

const columns: columnType[] = [
  {title: "ID", dataIndex: 'id'},
  {title: "昵称", dataIndex: 'nickname'},
  {title: "头像", slotName: 'avatar'},
  {title: "角色", dataIndex: 'role', type: "options", options: roleOptions},
  {title: "消费金额", dataIndex: 'money', type: "money"},
  {title: "积分数", dataIndex: 'scope'},
  {title: "对话数", dataIndex: 'userChatCount'},
  {title: "创建角色数", dataIndex: 'userCreateAIRoleCount'},
  {title: "注册时间", dataIndex: 'createdAt', type: "date"},
  {title: "操作", slotName: 'action'},
]

const formList: formListType[] = [
  {
    label: "昵称", field: "nickname", type: "input", rules: {required: true}, validateTrigger: "blur",
  },
  {
    label: "头像", field: "avatar", type: "image", rules: {required: true}, validateTrigger: "blur",
  },
  {
    label: "角色", field: "role", type: "select", rules: {required: true}, validateTrigger: "blur", source: roleOptions,
  }
]

async function update(record: any) {
  const res = await userAdminUpdateInfoApi({
    nickname: record.nickname,
    userID: record.id,
    role: record.role,
    avatar: record.avatar,
  })
  if (res.code){
    Message.error(res.msg)
    return false
  }
  Message.success(res.msg)
  return true
}

const filters :filterGroupType[] = [
  {
    label: "角色过滤",
    source: roleOptions,
    column: "role"
  }
]

</script>

<template>
  <div>
    <f_list
        ref="fListRef"
        :url="userListApi"
        add-form-label="创建用户"
        edit-form-label="更新用户信息"
        edit-label="更新用户信息"
        @update="update"
        no-add
        :form-list="formList"
        :filter-group="filters"
        :columns="columns">
      <template #avatar="{record}:{record: userListType}">
        <f_avatar :title="record.nickname" :image-url="record.avatar" :size="40"></f_avatar>
      </template>
    </f_list>
  </div>
</template>

<style scoped>

</style>